<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ONIX</title>
    <!--vendor css-->
    <link rel="stylesheet" href="./css/normalize.min.css">
    <!--app css-->
    <link rel="stylesheet" href="./css/main.css">
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
   <nav id="top-nav-menu">
        <div id="lang">
           <div id="en">bg</div>
           <div id="bg" class="active">en</div>
           <div id="ru">ru</div>
        </div>
        <div id="search-field">
           <input type="text" name="search" id="search" placeholder="Search ..." required>
           <button id="search-button"></button>
        </div>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div id="close-button">X</div>
        <div id="copyright">
           <p>Copyright&copy Onix 2014</p>
        </div>          
    </nav> <!--# top nav menu-->
    <div class="wrapper cf">
        <div id="load-logo">
            
        </div>
        <header id="header" class="cf">
            <div id="search-icon"></div>
            <div id="logo"></div>
            <div id="menu-icon"></div>
        </header> <!--# header-->
        
        <div id="slide-show">
            <ul>
                <li><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
            </ul>
        </div> <!--# slide show--> 
        
        <div id="scroll-icon"></div>
        
        <section id="content-home">
            <article class="projects cf">
                <h1>PROJECTS</h1>
                <div id="filter" class="cf">
                    <ul class="cf">
                        <li><a href="#" class="active" data-group="all">All</a></li>
                        <li><a href="#" data-group="Apartment">Apartment</a></li>
                        <li><a href="#" data-group="Multi-family house">Multi-family house</a></li>
                        <li><a href="#" data-group="Condominium">Condominium</a></li>
                        <li><a href="#" data-group="Cooperative">Cooperative</a></li>
                    </ul>
                </div>
                <div id="grid" class="cf">                  
                    <a href="project.html" class="item col650_300" data-groups='["all", "Apartment"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                    <a href="project.html" class="item col300_300" data-groups='["all", "Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>               
                    <a href="project.html" class="item col650_300" data-groups='["all", "Apartment","Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                    <a href="project.html" class="item col300_650" data-groups='["all", "Apartment", "Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                    <a href="project.html" class="item col300_300" data-groups='["all", "Multi-family house","Condominium"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                    <a href="project.html" class="item col300_300" data-groups='["all", "Condominium", "Cooperative"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                    <a href="project.html" class="item col300_650" data-groups='["all", "Cooperative"]' style="background-image: url(./images/architecture-1.jpg);"></a> 
                    <div class="shuffle-sizer"></div>
                </div> 
            </article>
        </section> <!--# content--> 
        
    </div> <!--# wrapper--> 
    
    <!--vendor scripts-->
    <script src="./lib/jquery-1.11.1.min.js"></script>
<!--    <script src="./lib/jquery.masonry.min.js"></script>-->
    <script src="./lib/jquery.shuffle.modernizr.js"></script>   
    <!--app scripts-->
    <script src="./js/main.js"></script>
</body>